<template>
  <div class="home-page-root">
    <lark-home-page header-height="100%">
      <template slot="header">
        <lark-head2 :title-text="titleText" :user-handle-list="userHandleList" :head-data="headData" height="80px"
                    @tabClick="tabClick"
                    @messageClick="messageClick"
                    @userClick="userClick" :message-data-list="messageDataList" :message-max="99"
                    :message-value="messageValue" ref="pageHeader"></lark-head2>
      </template>

      <div class="page-body">
        <transition name="fade" mode="out-in">
          <router-view/>
        </transition>
      </div>
    </lark-home-page>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, nextTick } from '@vue/composition-api'
  import router from '@/router'
  import screenfull from 'screenfull'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import { autoResize } from '@/utils/autoResize'

  export default {
    props: {},
    components: {},
    created() {
      console.log('thisthisthisthis', this)
    },

    setup(props, content) {

      let messageValue = 0

      let messageDataList = [
        {
          label: '<span style="color: red">测试</span>',
          cus: '111'
        }
      ]

      const full = () => {
        if (!screenfull.isEnabled) {
          Message.warning('你的浏览器不支持全屏')
          return false
        }
        screenfull.toggle()
      }

      const exit = () => {
        MessageBox.confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/'
          })
        })
      }

      let headData = computed(() => {
        return store.state.homeMessage.headData
      })

      let titleText = computed(() => {
        return store.state.homeMessage.title
      })

      const userHandleList = [
        {
          icon: 'el-icon-switch-button',
          label: '退出登入',
          cus: 'exit'
        },
        {
          icon: 'el-icon-full-screen',
          label: '全屏展示',
          cus: 'full'
        }
      ]
      const data = reactive({

        headData,
        userHandleList,
        full,
        exit,
        messageDataList,
        messageValue,
        titleText
      })

      const tabClick = tabData => {
        let { path } = tabData
        router.push(path)
      }

      const messageClick = messageData => {
        let { path } = messageData
        router.push(path)
      }

      const userClick = ({ cus }) => {
        if (!cus || !data[cus]) return
        data[cus]()
      }

      return { ...toRefs(data), tabClick, messageClick, userClick }
    }
  }
</script>

<style lang="scss">
  $full: 100%;
  .home-page-root {
    height: $full;
    width: $full;

    .lark-home-page-root {

      .el-header {
        height: 8%;

        .lark-head2 {
          height: 100%;

          .heade2-back {
            height: 100%;

            .left-decoration, .content, .right-decoration {
              height: 100%;
            }

            .content {
              display: flex;
              flex-direction: column;
              justify-content: center;
              font-size: 3vh;
              min-width: 15%;
            }

            .right-decoration {
              .top-nav {
                height: 100%;

                .el-tabs {
                  height: 100%;
                  margin: 0;

                  .el-tabs__header {
                    height: 100%;

                    .el-tabs__nav-wrap {
                      height: 100%;

                      .el-tabs__nav-scroll {
                        height: 100%;

                        .el-tabs__nav {
                          height: 100%;
                          width: 100%;
                          display: flex;
                          flex-direction: row;
                          align-items: center;

                          .el-tabs__item {
                            width: 30%;
                            height: 60%;
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            .router-container {
                              height: 66%;
                              width: 100%;

                              a {
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                align-items: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                margin: 0 5%;
                                width: 90%;
                                font-size: 1vw;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }

              .top-menu {
                height: 100%;
                width: 20%;
                margin: 0;
                display: flex;
                flex-direction: row;
                justify-content: space-around;

                .top-message {
                  height: 100%;
                  width: 23%;
                  margin: 0;

                  .el-badge {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .el-dropdown {
                      height: 100%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;

                      .el-button {
                        height: 53%;
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                      }

                    }

                    .el-badge__content {
                      width: 60%;
                      height: 28%;
                      top: 13%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                    }
                  }
                }

                .top-user {
                  height: 100%;
                  width: 23%;
                  margin: 0;

                  .el-dropdown {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .el-button {
                      height: 53%;
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                    }

                  }

                }
              }
            }
          }

        }
      }

      .page-body {
        height: $full;
        width: $full;
        background: rgba(60, 106, 180, .2);

        .fade-enter-active, .fade-leave-active {
          transition-property: opacity;
          transition-duration: .1s;
        }

        .fade-enter-active {
          transition-delay: .1s;
        }

        .fade-enter, .fade-leave-active {
          opacity: 0
        }
      }
    }
  }
</style>
